<template>
    <div >
        <el-row class="bone-margin-10">
                <el-row style='margin-top: 10px; margin-bottom: 20px;'>
                <el-breadcrumb separator-class="el-icon-arrow-right">
                    <el-breadcrumb-item>新闻管理</el-breadcrumb-item>
                    <el-breadcrumb-item>添加普通新闻</el-breadcrumb-item>
                </el-breadcrumb>
        </el-row>
        <el-row>
            <el-form :model="form" :rules="rules" ref="form" size="small">
                <el-col :span="24">
                    <el-form-item label='标题' :label-width="formLabelWidth" prop="title">
                        <el-input v-model="form.title" placeholder="请输入新闻标题"></el-input>
                    </el-form-item>
                    <el-row>
                        <el-col :span="8">
                            <el-form-item label='栏目' :label-width="formLabelWidth" prop="columnId">
                                <el-select v-model.number="form.columnId" placeholder="请选择栏目" style="width:100%">
                                    <el-option v-for="item in columns" :key="item.columnId" :label="item.columnName" :value="item.columnId">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label='记者' :label-width="formLabelWidth" prop="reporterName">
                                <el-input v-model="form.reporterName" placeholder="请输入记者名称"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label='来源' :label-width="formLabelWidth" prop="origin">
                                <el-input v-model="form.origin" placeholder="请输入来源"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-form-item label='摘要' :label-width="formLabelWidth" prop="summary">
                        <el-input v-model="form.summary" type="textarea" :autosize="{ minRows: 2, maxRows: 4}" placeholder="请输入摘要内容"></el-input>
                    </el-form-item>

                    <el-row>
                        <el-col :span='8'>
                            <el-form-item label='相关新闻' :label-width="formLabelWidth">
                                <el-row>
                                    <el-col :span='11'>
                                        <el-input v-model="form.relationId1" style="width:100%" />
                                    </el-col>
                                    <el-col :span='11' :offset="1">
                                        <el-input v-model="form.relationId2" style="width:100%" />
                                    </el-col>
                                </el-row>
                            </el-form-item>
                        </el-col>
                        <el-col :span='8'>
                            <el-form-item label='评论状态' :label-width="formLabelWidth" prop="commentType">
                                <el-radio-group v-model.number="form.commentType">
                                    <el-radio-button label=0>无需审核</el-radio-button>
                                    <el-radio-button label=1>手动审核</el-radio-button>
                                    <el-radio-button label=2>禁止</el-radio-button>
                                </el-radio-group>
                            </el-form-item>
                        </el-col>
                        <el-col :span='8'>
                            <el-form-item label='图片类型' :label-width="formLabelWidth" prop="imgType">
                                <el-radio-group v-model.number="form.imgType">
                                    <el-radio-button label="0">单图(小)</el-radio-button>
                                    <el-radio-button label="1">单图(大)</el-radio-button>
                                    <el-radio-button label="2">三图</el-radio-button>
                                </el-radio-group>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span='16'>
                            <el-form-item label='列表图片' :label-width="formLabelWidth" prop="imgs">
                                <el-upload v-model="form.fileList" :action="action" list-type="picture-card" :on-preview="handlePictureCardPreview" :on-remove="handleRemove" :file-list="form.fileList" :auto-upload="autoUpload" :on-success="uploadSuccess" :on-error="uploadError" :before-upload="beforeUpload">
                                    <i class="el-icon-plus"></i>
                                </el-upload>
                                <el-dialog v-model="dialogVisible">
                                    <img width="100%" :src="dialogImageUrl" alt="">
                                </el-dialog>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-form-item label='内容' :label-width="formLabelWidth" prop="contents">
                        <vue-html5-editor v-model="form.txtContent" :content="form.txtContent" :height="form.contentHeight" @change="updateContent"></vue-html5-editor>
                    </el-form-item>
                    <el-form-item label="" :label-width="formLabelWidth">
                        <el-button type="info" @click="goBack">返回</el-button>
                        <el-button type="primary" @click="submitForm('form')" :disabled='submitDisabled'>提交</el-button>
                    </el-form-item>
                </el-col>
            </el-form>
        </el-row>
        </el-row>
       
    </div>
</template>
<script>
import Http from '@/components/utils/httpUtil'

export default {
    data(){

        let imgsRule = (rule,value,callback)=>{
            
            if(!this.form.fileList){
                return callback(new Error('列表图片不能为空'));
            }
            if(this.form.fileList.length==0){
                return callback(new Error('列表图片不能为空'));
            }
            if(this.form.imgType==2){
                if(this.form.fileList.length!=3){
                    return callback(new Error('三图必须上传3张照片'));
                }
            }
            callback();
        }

        let contentRule = (rule,value,callback)=>{
            // console.log('content',this.form.txtContent)
            // console.log('form',this.form)
            if(this.form.txtContent.length==0){
                return callback(new Error('内容不能为空'));
            }
            callback();
        }

        return {
            dialogImageUrl: '',
            dialogVisible: false,
            // fileList: [
            //     {
            //         //name: 'food.jpeg', 
            //         url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
            //     }, 
            //     {
            //         //name: 'food2.jpeg', 
            //         url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
            //         }
            // ],
            action: 'http://localhost:20000/sys/file/imgUpload',
            autoUpload: true,
            formLabelWidth: '80px',
            columns: [
                {
                    columnId: 1,
                    columnName: '头条'
                },
                {
                    columnId: 2,
                    columnName: '热点'
                },
                {
                    columnId: 3,
                    columnName: '科技'
                },
                {
                    columnId: 4,
                    columnName: '体育'
                }
            ],
            form: {
                title: '',
                columnId: '',
                reporterName: '',
                origin:'',
                summary: '',
                relationId1: '',
                relationId2: '',
                commentType: 0,
                imgType: 0,
                fileList: [
                ],
                txtContent: '',
                contentHeight: 250
            },
            rules: {
                title: [
                    { required: true, message: '请输入新闻标题', trigger: 'blur' },
                    { min: 3, message: '长度最少 3 个字符', trigger: 'blur' }
                ],
                columnId: [
                    { required: true, message: '请选择栏目', trigger: 'change', type: 'number'}
                    // {validator: colRole,trigger: 'blur'}
                ],
                reporterName: [
                    { required: true, message: '请输入记者名字', trigger: 'blur' },
                    { min: 2, max:10, message: '长度 2 - 10 个字符', trigger: 'blur' }
                ],
                origin: [
                    { required: true, message: '请输入来源', trigger: 'blur' },
                    { min: 2, max:10, message: '长度 2 - 10 个字符', trigger: 'blur' }
                ],
                summary: [
                    { required: true, message: '请输入摘要', trigger: 'blur' },
                    { min: 2, max:500, message: '长度 2 - 500 个字符', trigger: 'blur' }
                ],
                commentType: [
                    { required: true, message: '请选择评论类型', trigger: 'blur', type: 'number' },
                ],
                imgType: [
                    { required: true, message: '请选择列表图片类型', trigger: 'blur',type: 'number' },
                ],
                imgs: [
                    // {required: true, trigger: 'click', type: 'array', len: imgTypeFunc(), message: `请上传${imgTypeFunc()}张列表图片`}
                    {validator: imgsRule, trigger: 'click', type: 'array', required: true}
                ],
                contents: [
                    { validator:contentRule, trigger: 'blur', required: true }
                ]
            },
            submitDisabled: false
        }
        
    },
    computed: {
        imgListLength(){
            if(this.form.imgType==2){
                return 3;
            }else{
                return 1;
            }
        }
    },
    methods: {

        goBack(){
            this.$router.push('/newsList');
        },

        handleRemove(file, fileList) {
            // console.log("handleRemove");
            this.form.fileList = fileList;
        },
        handlePictureCardPreview(file) {
            // console.log("handlePictureCardPreview");
            this.dialogImageUrl = file.url;
            this.dialogVisible = true;
        },
        uploadSuccess(response, file, fileList){
            // console.log("fileList:",fileList)
            // console.log("response:",response)
            //console.log("file:",file)
            if(response.code==0 && response.data.length>0){
                file.url = response.data[0].urlList[0];
                // console.log(file.url)
            }
            this.form.fileList = fileList;

            //单独验证某个字段使用 .validateField('imgs');
            this.$refs['form'].validateField('imgs');
        },
        uploadError(err, file, fileList){
            this.$message({
                showClose: true,
                message:  `文件上传错误`,
                type: 'error'
            })
        },
        beforeUpload(file){
            let maxCount = 1;
            if(this.form.imgType==2){
                maxCount = 3;
            }
            if(this.form.fileList.length>=maxCount){
                
                this.$message({
                    showClose: true,
                    message:  `最多只能上传${maxCount}张图片`,
                    type: 'error'
                })
                return false;
            }
        },
        updateContent(data){
            this.form.txtContent = data;
            this.$refs['form'].validateField('contents');
        },
        submitForm(formName){
            this.$refs[formName].validate((valid)=>{
                if(valid){
                    
                    let p = {};
                    p.title = this.form.title;
                    p.columnNum = this.form.columnId;
                    p.reporterName = this.form.reporterName;
                    p.origin = this.form.origin;
                    p.summary = this.form.summary;
                    let relationIdList = new Array();
                    if(this.form.relationId1){
                        relationIdList.push(this.form.relationId1)
                    }
                    if(this.form.relationId2){
                        relationIdList.push(this.form.relationId2)
                    }
                    p.relationIdList = relationIdList;
                    p.commentType = this.form.commentType;
                    p.imgType = this.form.imgType;
                    p.content = this.form.txtContent;
                    
                    let imgs = new Array();

                    this.form.fileList.forEach((item,index,array)=>{
                        imgs.push(item.url);
                    });
                    p.imgs = imgs;
                    p.editorNum = 1;
                    
                    this.submitDisabled = true;
                    Http.fetch('/news/saveGeneral',p)
                    .then(res=>{
                        this.$message({
                            showClose: true,
                            message: res.sucMsg,
                            type: 'success'
                        });
                        this.submitDisabled = false;
                        this.$router.push('/newsList');
                    })
                    .catch(err=>{
                        // this.$message({
                        //     showClose: true,
                        //     message: res.errMsg,
                        //     type: 'error'
                        // });
                        this.submitDisabled = false;
                    });
                }
            });
        }
    }
}
</script>
<style scoped>
.top10 {
    margin: 15px 15px 0 15px;
}
</style>
